<template>
  <div class='register'>
    <van-nav-bar title="注册"
                 left-arrow
                 @click-left="onClickLeft"/>
    <div class='myLogoa'>
      <img src="../../../static/index/logo.jpg"
           alt="">
    </div>
    <div class='info'>
      <div class='hed'>
        <span>用户名</span>
        <input type="text"
               placeholder="请输入用户名" v-model="userName">
      </div>
      <div class='hed'>
        <span>邮&nbsp&nbsp&nbsp&nbsp箱</span>
        <input type="text"
               placeholder="请输入邮箱地址" v-model="userEmail">
      </div>
      <div class='hed'>
        <span>手机号</span>
        <input type="text"
               placeholder="请输入手机号" v-model="userPhone">
      </div>
      <div class='hed'>
        <span>验证码</span>
        <input type="text"
               placeholder="请输入短信验证码" v-model="userCode">
        <button :disabled="disabled" @click="sendcode">{{btnTxt}}</button>
      </div>
      <div class='hed'>
        <span>密&nbsp&nbsp&nbsp&nbsp码</span>
        <input type="password"
               placeholder="请设置登录密码" v-model="userPsd">
      </div>
    </div>
    <button class='enroll' @click="hanldRegister">注册</button>
    <router-link to='/login'>已有账号去登陆</router-link>
  </div>
</template>
<script>
  import {setStore} from '../../../src/config/mUtils'

  export default {
    name: 'register',
    data() {
      return {
        userName: '',
        userEmail: '',
        userPhone: '',
        userPsd: '',
        userCode: '',
        btnTxt: '获取验证码',
        time: 0,
        disabled: false
      }
    },
    methods: {
      //验证码验证
      sendcode() {
        var reg = /^1[3-9]\d{9}$/;
        if ( this.userPhone == '' ) {
          this.$toast.fail('请输入手机号码')
        } else if ( !reg.test(this.userPhone) ) {
          this.$toast.fail('手机格式不正确')
        } else {
          this.disabled = true
          this.sendMsg()
        }
      },
      //发送时长处理
      timer() {
        if ( this.time > 0 ) {
          this.time--;
          this.btnTxt = this.time + "s后重新获取";
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.btnTxt = "获取验证码";
          this.disabled = false;
        }
      },
      //发送验证码
      sendMsg() {
        this.$axios.post('user/sendMsg', this.qs.stringify({
          "phone": this.userPhone
        })).then((res) => {

          if ( res.data.message == '60秒钟之内不可再次发送' ) {
            this.$toast.fail(res.data.message)
            this.disabled = true
            return
          }

          if ( res.data.status === 1 ) {
            this.$toast.success(res.data.message)
            this.time = 60
            this.disabled = true
            this.timer()
          } else {
            this.$toast.fail(res.data.message)
            return
          }
        });
      },
      //注册
      hanldRegister() {

        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

        //验证用户名
        if ( this.userName.length < 3 || this.userName.length > 15 ) {
          this.$toast.fail('昵称最小长度为3个字符，最大长度为15字符')
          return
        }

        //验证邮箱
        if ( !regEmail.test(this.userEmail) || this.userEmail.length == '' ) {
          this.$toast.fail('邮箱格式不正确')
          return
        }

        //验证手机号
        if ( !reg.test(this.userPhone) || this.userPhone.length == '' ) {
          this.$toast.fail('请输入正确的手机号码')
          return
        }

        //短信验证码
        if ( this.userCode.length == '' ) {
          this.$toast.fail('验证码不能为空')
          return
        }

        //注册
        this.$axios.post('user/appregister', this.qs.stringify({
          "name": this.userName,
          "passwd": this.userPsd,
          "email": this.userEmail,
          "code": this.userCode,
          "mobile": this.userPhone,
        })).then((res) => {
          if ( res.data.status === 0 ) {
            this.$toast.fail(res.data.message)
          } else {
            this.$toast.success(res.data.message)
            setStore("userName", this.userName)
            setStore("userPsd", this.userPsd)
            this.$router.push({
              path: '/login'
            })
          }
        });
      },

      onClickLeft() {
        this.$router.go(-1)
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../static/css/user/register.scss";
</style>
